<script>
init({
  title: 'Modal Table',
  desc: 'Use Bootstrap Table in a modal. We need to call `resetView` method after modal shown.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<template>
  <button
    id="button"
    class="button large"
    data-open="exampleModal1"
  >
    Launch modal table
  </button>

  <div
    id="exampleModal1"
    class="reveal"
    data-reveal
  >
    <h4>Modal table</h4>
    <p>
      <table
        id="table"
        data-toggle="table"
        data-height="345"
        data-url="json/data1.json"
      >
        <thead>
          <tr>
            <th data-field="id">
              ID
            </th>
            <th data-field="name">
              Item Name
            </th>
            <th data-field="price">
              Item Price
            </th>
          </tr>
        </thead>
      </table>
    </p>
    <button
      class="close-button"
      data-close
      aria-label="Close modal"
      type="button"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</template>

<script>
  const $table = $('#table')

  function mounted () {
    new window.Foundation.Reveal($('#exampleModal1'))
    $('#exampleModal1').on('open.zf.reveal', function () {
      $table.bootstrapTable('resetView')
    })
  }
</script>
